<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>MyBlog | 账户编辑</title>
    <!-- Tell the browser to be responsive to screen width -->
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    <!-- Bootstrap 3.3.6 -->
    <link rel="stylesheet" href="../../static/build/css/app.min.css" th:href="${#fn.getStaticFile('/build/css/app.min.css')}">
    <link rel="stylesheet" href="../../static/lib/plugins/bootstrap-daterangepicker/daterangepicker.css"  th:href="${#fn.getStaticFile('/lib/plugins/bootstrap-daterangepicker/daterangepicker.css')}"/>
    <link rel="stylesheet" href="../../static/dist/css/common.css" th:href="${#fn.getStaticFile('/dist/css/common.css')}">
    <script src="../../static/build/js/app.min.js" th:src="${#fn.getStaticFile('/build/js/app.min.js')}"></script>
    <script src="../../static/lib/plugins/bootstrap-daterangepicker/moment.min.js" th:src="${#fn.getStaticFile('/lib/plugins/bootstrap-daterangepicker/moment.min.js')}" type="text/javascript"></script>
    <script src="../../static/lib/plugins/bootstrap-daterangepicker/daterangepicker.js" th:src="${#fn.getStaticFile('/lib/plugins/bootstrap-daterangepicker/daterangepicker.js')}" type="text/javascript"></script>
    <script src="../../static/dist/js/common.js" th:src="${#fn.getStaticFile('/dist/js/common.js')}"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#btnSubmit").click(function () {
                $("#btnSubmit").attr("disabled", true);
                $("#accountForm").submit();
            });
            $("#accountForm").validate({
                rules: {
                    loginName: {remote: ctx +"sys/account/checkLoginName?id=" +$("#id").val(),required:true},
                    name: {required: true},
                    roleIds: {required: true},
                    departmentId: { required: true},
                    birthday: {required: true}
                },
                messages: {
                    loginName: {required: "登录名不能为空",remote:"登录名已存在"},
                    name: {required: "姓名不能为空"},
                    roleIds: {required: "角色不能为空"},
                    departmentId: { required: "部门不能为空"},
                    birthday: {required: "生日不能为空"}
                },
                invalidHandler: function (form, validator) {
                    $("#btnSubmit").attr("disabled", false);
                }
            });
        });
    </script>
</head>
<body class="hold-transition skin-blue sidebar-mini " th:classappend="${#session.getAttribute('sidebarClass')}" th:with="pageCode='accountForm'">
    <div class="wrapper">
    <!-- Main Header -->
    <div th:replace="fragment/layout :: header"></div>
    <!-- Left side column. contains the logo and sidebar -->
    <div th:replace="fragment/layout :: menu(activePageCode=${pageCode})"></div>
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Main content -->
        <section class="content">
            <!-- Nav tabs -->
            <ul th:replace="fragment/menuTab :: menuTab(activePageCode=${pageCode})"></ul>
            <div th:if="${message!=null}"  th:class="'alert alert-'+${message.type}" th:text="${message.code}"></div>
            <div class="panel panel-info">
                <div class="panel-body">
                    <div th:replace="fragment/validatorError :: validate(${bindingResult})"></div>
                    <form id="accountForm" th:action="@{/sys/account/save}" method="post" class="form-horizontal">
                        <input type="hidden" id="id" name="id" th:value="${account.id}"/>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="loginName">登录名</label>
                            <div class="col-sm-6">
                                <input id="loginName" name="loginName" class=" form-control checkLoginName" th:value="${account.loginName}" autofocus />
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">新密码</label>
                            <div class="col-sm-6">
                                <input id="password" name="password" type="password" class="form-control " placeholder="若不修改密码，请留空。" autofocus/>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">绑定角色</label>
                            <div class="col-sm-6">
                                <select id="roleIds" name="roleIds" placeholder="搜索角色名称，可多选。" multiple="multiple" class="selectize">
                                    <option th:each="roldId : ${account.roleIds}" th:value="${roldId}" th:text="${#fn.getRole(roldId).name}" selected="selected">Admin</option>
                                    <option th:each="role : ${roleList}" th:value="${role.id}"  th:text="${#fn.getRole(role.id).name}">Admin</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label">账套</label>
                            <div class="col-sm-6">
                                <select id="companies" name="companies" placeholder="可多选。" multiple="multiple" class="selectize required" >
                                    <option th:each="company : ${account.getCloudList()}" th:value="${company}" th:text="${company}" selected="selected">oppoZMC</option>
                                    <option th:each="company : ${companyList}" th:value="${company}" th:text="${company}" >oppoZMD</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <label class="col-sm-3 control-label" for="departmentId">部门</label>
                            <div class="col-sm-6">
                                <select id="departmentId" name="departmentId" class="form-control"  th:field="${account.departmentId}">
                                    <option th:each="department : ${departments}" th:value="${department.id}" th:text="${department.fullName}">Credit card</option>
                                </select>
                            </div>
                        </div>
                        <div class="form-group">
                            <div class="col-sm-9 col-sm-offset-3">
                                <button type="button" class="btn btn-primary" id="btnSubmit">
                                    <span class="glyphicon glyphicon-ok"></span>保存
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>
    <!-- /.content-wrapper -->
    <div th:replace="fragment/layout :: footer"></div>
</div>
</body>
</html>